<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

  <template id="my-app">
    <!-- 绑定textarea -->
    <h2>自我介绍</h2>
    <textarea name="intro" id="intro" cols="30" rows="10" v-model="message"></textarea>
    <h3>intro: {{message}}</h3>

    <!-- 绑定checkbox -->
    <!-- 单选框 -->
    <label>
      <input id="agree" type="checkbox" v-model="isAgree">同意协议
    </label>
    <h3>{{isAgree}}</h3>
    <!-- 多选框 -->
    <span>你的爱好</span>
    <label>
      <input id="baskball" type="checkbox" v-model="hobbies" value="baskball">篮球
    </label>
    <label>
      <input id="football" type="checkbox" v-model="hobbies" value="football">足球
    </label>
    <label>
      <input id="tennis" type="checkbox" v-model="hobbies" value="tennis">网球
    </label>
    <h3>hobbies: {{hobbies}}</h3>

    <!-- 绑定radio -->
    <span>你的爱好：</span>
    <label>
      <input id="male" type="radio" v-model="gender" value="男">男
    </label>
    <label>
      <input id="female" type="radio" v-model="gender" value="女">女
    </label>
    <h2>gender: {{gender}}</h2>

    <!-- 绑定select -->
    <span>喜欢的水果：</span>
    <select v-model="fruit">
      <option value="apple">苹果</option>
      <option value="orange">橘子</option>
      <option value="banana">香蕉</option>
    </select>
    <h2>fruit: {{fruit}}</h2>

  </template>

  <script src="../js/vue.js"></script>
  <script>
    const App = {
      template: "#my-app",
      data() {
        return {
          message: "Hello World",
          isAgree: false,
          hobbies: [],
          gender: "",
          fruit: "apple",
        }
      }
    };

    Vue.createApp(App).mount("#app");
  </script>
</body>

</html>